import React, { PropTypes } from 'react';
import { Layout, BackTop } from 'antd';
import LeftSide from '../LeftSide/LeftSide';
import Top from '../Top/Top';
import RightContent from '../RightContent/RightContent';
import styles from './App.less';

const { Header, Sider, Footer } = Layout;

const App = ({ app, onClick }) => {
  return (
    <Layout className={styles.layout}>
      <Header className={styles.header}>
        <Top mode={app.mode} onClick={onClick} />
      </Header>
      <Layout>
        <Sider className={styles.sider} trigger={null} collapsible collapsed={app.collapsed}>
          <LeftSide mode={app.mode} />
        </Sider>
        <Layout>
          <RightContent />
          <Footer className={styles.footer}>
            <BackTop />
            Ant Design ©2016 Created by Ant UED
          </Footer>
        </Layout>
      </Layout>
    </Layout>
  );
};

App.propTypes = {
  app: PropTypes.object.isRequired,
  onClick: PropTypes.func.isRequired,
};

export default App;
